<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Gnatoo</title>

<link href="style.css" rel="stylesheet" type="text/css" />
	
<link href="jslibraries/jquery/css/smoothness/jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css" />

<link href="css/examples/tables/bluetablesorter/style.css"
	rel="stylesheet" type="text/css" />
<link href="css/examples/tabs/simple.css" rel="stylesheet" type="text/css" />
<link href="css/examples/trees/simple.css"
	rel="stylesheet" type="text/css" />

<script type="text/javascript" src="jslibraries/jquery/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery.layout.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery.simplemodal-1.4.1.js"></script>

<script type="text/javascript" src="gnatoo/gnatoo.js"></script>

<script type="text/javascript" src="jslibraries/data/BaseListDataProvider.js"></script>
<script type="text/javascript" src="jslibraries/data/TreeDataProvider.js"></script>

</head>

<body>
<form>

<script type="text/javascript">
var portfolio = {
		parts : [ {
			title : 'nasdaq stocks',
			papers : [ 
				{ id: 'ABC', lastprice: 45.00, units : 400, actions : [ 
					{ date : '12/01/2010', amount : 120, actiontype : 'sell'},
					{ date : '12/02/2010', amount : 120, actiontype : 'buy'},
					{ date : '13/02/2010', amount : 120, actiontype : 'buy'},
					{ date : '14/02/2010', amount : 120, actiontype : 'buy'},
				] },
				{ id: 'TWITTER', lastprice: 32.00, units : 200, actions : [ 
					{ date : '12/01/2010', amount : 120, actiontype : 'sell'},
					{ date : '13/01/2010', amount : 220, actiontype : 'buy'},
					{ date : '12/01/2010', amount : 120, actiontype : 'sell'},
					{ date : '21/02/2010', amount : 620, actiontype : 'buy'},
					{ date : '22/02/2010', amount : 320, actiontype : 'buy'},
				] },
				{ id: 'RTE', lastprice: 450.00, units : 100, actions : [ 
					{ date : '12/01/2010', amount : 120, actiontype : 'sell'},
					{ date : '12/02/2010', amount : 120, actiontype : 'buy'},
				] }
			],
			total : 1000.45,
			desc :'nasdaq stocks'
		} , {
			title : 'american stocks',
			papers : [ 
				{ id: 'APPLE', lastprice: 345.00, units : 2000, actions : [ 
					{ date : '12/01/2010', amount : 120, actiontype : 'sell'},
					{ date : '12/02/2010', amount : 120, actiontype : 'buy'},
				] },
				{ id: 'GOOGLE', lastprice: 605.00, units : 250, actions : [ 
					{ date : '12/01/2010', amount : 120, actiontype : 'sell'},
					{ date : '12/02/2010', amount : 120, actiontype : 'buy'},
				] },
				{ id: 'IBM', lastprice: 145.00, units : 700, actions : [ 
					{ date : '12/01/2010', amount : 120, actiontype : 'sell'},
					{ date : '12/02/2010', amount : 120, actiontype : 'buy'},
				] }
			],
			total : 2000.45,
			desc :'american stocks'
		} ],
		
		remark : 'vip customer'
	};

var Treetable = new TreeDataProvider();
Treetable.treeProvider =  {
		getChildren : function(object) {
			//alert(''+object.parts);
			if (object == null) {
				return null;
			}
			if (object.parts != null) {
				return object.parts;
			}
			if (object.papers != null) {
				return object.papers;
			}
			if (object.actions != null) {
				return object.actions;
			}
			return [];
		}
};
//alert(Treetable);
Treetable.setData(portfolio);

</script>
<div id="Treetable" >
<script type="text/html">
  <table class="tablesorter" border="0" cellpadding="0" cellspacing="1" >
	<thead>
    <tr>
		<th style="width: 120px">title</th>
		<th style="width: 120px"></th>
		<th style="width: 80px">last price</th>
		<th style="width: 80px">date</th>
		<th style="width: 100px">amount</th>
		<th style="width: 50px">buy/sell</th>
	</tr>
	</thead>
	
	<loop value="#{.Treetable.getNodes()}" var="node">
		<tbody>
		<tr rendered="#{.node.data.title != null}" onclick="#{.Treetable.toggleNodeExpand(.node)}">
			<td class="#{.node.expanded ? 'collapse' : 'expand'}">#{.node.data.title}</td>
			<td colspan="5">#{.node.data.total}</td>
		</tr>
		<tr rendered="#{.node.data.id != null}" onclick="#{.Treetable.toggleNodeExpand(.node)}">
			<td></td>
			<td class="#{.node.expanded ? 'collapse' : 'expand'}">#{.node.data.id}</td>
			<td>#{.node.data.lastprice}</td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr rendered="#{.node.data.actiontype != null}">
			<td colspan="3"></td>
			<td>#{.node.data.date}</td>
			<td style="color:#{.node.data.actiontype == 'buy' ? 'green':'red'}" >#{.node.data.amount}</td>
			<td>#{.node.data.actiontype}</td>
		</tr>
		</tbody>
	</loop>
	
  </table>

</script>
</div>
<script>
$(document).ready( function() { 
	// init context
	var gnatooContext = window.gnatoo.initByName('Treetable'); 
	// bind model
	gnatooContext.data['Treetable'] = Treetable;
	// render
	gnatooContext.render();
});
</script>


<!-- <jsp:include page="tutorials/Tables/Treetable/Treetable.html"
	flush="false"></jsp:include>
 -->

</form>
<pre id="mylog" style="font-size: 1.0em; display : block"></pre>
</body>
</html>


